<template>
    <div class="box" :style="boxStyle"></div>
    <button @click="change">change</button>
    <button @click="reset">reset</button>
    <hr>
    <div class="box-moving"></div>
    <hr>
    <button @click="toggle">toggle</button>
    <transition name="fade">
        <h1 v-if="showText">你好，Vue3</h1>
    </transition>
</template>

<script setup>
import { ref, computed } from 'vue'
let width = ref(100)
let boxStyle = computed(() => ({
    width: `${width.value}px`
}))
function change(val) {
    width.value += 100
}
function reset() {
    width.value = 100
}

let showText = ref(false)
function toggle() {
    showText.value = !showText.value
}
</script>

<style lang="less">
.box {
    height: 100px;
    margin: 15px 0;
    background-color: palevioletred;
    transition: width .5s ease;
}

.box-moving {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: palevioletred;
    animation: move 5s linear infinite;
}
@keyframes move {
    0% { left: 0 }
    50% { left: 200px }
    100% { left: 0 }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s linear;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>